{% extends "base.html" %}
{% load staticfiles %}
<head>

</head>
{% block title %}实盘策略监控{% endblock %}

{% block styles %}
    <style>


        {#表头样式#}
        .thead-light {
            width: auto;
            background-color: #ddd;
        }


        .pagination-info {
            display: none
        }

        .page-list {
            display: none
        }

        #sse {
            color: #36a9ce;
        }

        #startstg .modal-body {
            background-color: #282923;
            padding: 0px;
        }

        /*无数据时鼠标悬浮的背景颜色*/
        .table-hover > tbody > tr:hover {
            background-color: #444444;
            cursor: pointer;
        }

        #StgFileShow, #ConFileShow {
            background-color: #282923;
            color: #90918b;
            border-width: 0px;
            width: 448px;
            height: 100%;
        }

        #stg_check {
            padding: 10px;
        }

        .row {
            margin-top: 10px;
        }


        .left {
            width: 60%;
            height: 400px;
            float: left;
        }

        .right {
            width: 37%;
            height: 400px;
            float: left;
        {#margin-right: 30px;#}
        }

        .buttom {
            display: none;
            width: 97%;
            height: 400px;
            float: left;
            margin-top: 100px;
        }

        {#tab表头的选中的样式#}
        .nav-tabs-custom > .nav-tabs > li.active > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
            background-color: red;
            color: white;
        }

        {#tab样式#}
        .nav-tabs-custom > .nav-tabs > li {
            border-top: transparent;
            margin-bottom: -2px;
            margin-right: 2px;
        }

        .nav-tabs > li {
            float: left;
            margin-bottom: -1px;
        }

        .nav > li > a {
            position: relative;
            display: block;
            padding: 4px 20px;
        }

        {#tab头的位置及边框颜色透明#}
        .nav-tabs-custom > .nav-tabs {
            border-bottom-color: rgba(0, 0, 0, 0.2);
            border-top-right-radius: 3px;
            border-top-left-radius: 3px;
            margin-left: 10px;
        }

        {#tab中的a标签悬浮样式#}

        .nav-tabs-custom > .nav-tabs > li > a, .nav-tabs-custom > .nav-tabs > li > a:hover {
            background: rgba(255, 255, 255, .15);
            margin: 0;
        }

        .nav-tabs-custom > .nav-tabs > li > a {
            color: #d2d6de;
            border-radius: 0;
        }


        .simcheck {
            float: left;
            margin-top: 15px;
            margin-left: 10px
        }

        .packheadiv {
            float: left;
            margin-top: 15px;
            margin-left: 10px
        }

        .cancelheadiv {
            float: left;
            margin-top: 15px;
            margin-left: 10px
        }

        .simcheckhead, .simHead, .packHead {
            color: white;
            margin-left: 30px;
        }

        .cancelheadiv, .packheadiv, .traheadiv {
            margin-left: 30px;
        }

        .bootstrap-table .fixed-table-container .table {
            width: 100%;
            margin-bottom: 0 !important;
            color: #A0A0A0;
        }

        .alterpara {
            background-color: white;
        }


    </style>
{% endblock %}

{% block content %}
    <!--策略修改模态框-->
    <div class="modal fade" id="editstg" data-backdrop="static" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">修改策略参数</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div style="margin-top:3%;display: none">
                            <label>参数ID</label>
                            <input class="opts" type="text" id="paraid">
                        </div>
                        <div style="margin-top:3%">
                            <label>参数名</label>
                            <input class="opts" type="text" id="paraname" disabled style="background-color: #919191">
                        </div>
                        <div style="margin-top:3%">
                            <label>参数值</label>
                            <input class="opts" type="text" id="paravalue">
                            <div id="para_spaninfo" style="color: red;margin-left: 112px"></div>
                        </div>
                        <div style="margin-top:3%">
                            <label>描述</label>
                            <input class="opts" type="text" id="paradesc">
                        </div>
                        <hr>
                        <div style="height: 20px; display: block">
                            <div style="padding-left:120px; float: left;">
                            <span class="btn-cancel btn-stc"
                                  onclick="quit__()">取消</span>
                            </div>
                            <div style="padding-left:5px;float: left;">
                            <span class="btn-confirm btn-stc"
                                  onclick="sub()">提交</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--修改成功模态框-->
    <div class="modal fade" data-backdrop="static" id="oper_success">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="title_success">修改参数</h4>
                </div>
                <div class="modal-body">
                    <div>
                        <p id="msg_success" class="operat-success">
                            策略修改成功!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="upmodal" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">一键撤单</h4>
                </div>
                <div class="modal-body">
                    <div style="margin-top:3%; display: block">确认执行"一键撤单"操作？</div>
                </div>
                <div style="height: 30px; display: block;margin-top: 20px">
                    <div style="padding-left:120px; float: left;">
                        <span class="btn-cancel btn-stc" onclick="quit_stop()">取消</span>
                    </div>
                    <div style="padding-left:5px; float: left;">
                        <span class="btn-confirm btn-stc" onclick="sub1()">提交</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--人工录入模态框-->
    <div class="modal fade" id="input_" data-backdrop="static" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">人工录入</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div style="display: none">
                            <input id="manual-ruleid">
                            <input id="manual-rulename">
                        </div>
                        <div style="margin-top:3%; display: block">
                            <label>债券代码*</label>
                            <input class="opts" id="bondcode" name="bondcode" type="text"
                                   placeholder="债券代码">
                            <div id="bodecode_spaninfo" class="error_input"></div>
                        </div>
                        <div style="margin-top:3%">
                            <label>方向*</label>
                            <select class="opts" id="direction" name="direction">
                                <option selected value="">
                                </option>
                                <option value="0">
                                    Bid
                                </option>
                                <option value="1">
                                    Ofr
                                </option>
                            </select>
                            <div id="direction_spaninfo" class="error_input"></div>
                        </div>
                        <div style="margin-top:3%">
                            <label>清算速度*</label>
                            <select class="opts" id="speedliqui" name="speedliqui">
                                <option value="1">
                                    T+0
                                </option>
                                <option selected value="2">
                                    T+1
                                </option>
                            </select>
                            <div id="speedliqui_spaninfo" class="error_input"></div>
                        </div>
                        <div style="margin-top:3%; display: block">
                            <label>成交价(%)*</label>
                            <input class="opts" id="tranc" name="tranc" type="text"
                                   placeholder="成交价">
                            <div id="tranc_spaninfo" class="error_input"></div>
                        </div>
                        <div style="margin-top:3%; display: block">
                            <label>净价(元)</label>
                            <input class="opts" id="netprice" name="netprice" type="text"
                                   placeholder="净价">
                            <div id="netprice_spaninfo" class="error_input"></div>
                        </div>
                        <div style="margin-top:3%; display: block">
                            <label>成交量(万)*</label>
                            <input class="opts" id="vol" name="vol" type="text"
                                   placeholder="成交量">
                            <div id="vol_spaninfo" class="error_input"></div>
                        </div>
                        <hr>
                        <div style="height: 20px; display: block">
                            <div style="padding-left:120px; float: left;">
                            <span class="btn-cancel btn-stc"
                                  onclick="quit__()">取消</span>
                            </div>
                            <div style="padding-left:5px;float: left;">
                            <span class="btn-confirm btn-stc"
                                  onclick="input_sub()">提交</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--人工录入确认模态框-->
    <div class="modal fade" id="input_confirm">
    </div>
    <!--风控信息模态框-->
    <div class="modal fade" id="stcriskinfo_id" data-backdrop="static" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 90%;">
            <div class="modal-content " style=" background-color: #f5f5f5">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">风控信息</h4>
                </div>
                <table id="stcriskinfoTable"
                       style="table-layout: fixed;word-break:break-all; word-wrap:break-all;">

                </table>
            </div>
        </div>
    </div>

    <!-- Main content -->
    <section class="content" style="background-color: #000000">
        <div class="row" id="content" name="{{ customerid }}">
            <div class="col-xs-12">
                <div class="nav-tabs-custom left" style="background-color: #000000">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#fa-simapproval" onclick="tabs(1)" data-toggle="tab"
                                              style="margin-bottom: 15px;">策略列表</a></li>
                        <span id="link" class="link-position"></span>
                        <span id="link-online" class="link-position" style="float: right"></span>
                    </ul>
                    <div class="tab-content" style="background-color: #000000">
                        <!--策略列表-->
                        <div class="tab-pane active mailbox-messages" id="fa-simapproval">
                            <div class=" mailbox-messages">
                                <div class="cancelheadiv" style="margin-left: 25px"></div>
                                <table id="toolbar"></table>
                                <div class="uploadHead">
                                    <div class="bs-bars pull-left"></div>
                                    <div class="uploadheadiv" style="margin-left: 10px;margin-bottom: -41px;">
                                        <button class="upstrategy" onclick="stopall()">一键撤单</button>
                                    </div>
                                </div>
                                <table class="table table-bordered table-striped table-hover" id="RuleTable"
                                       style="table-layout: fixed;word-break:break-all; word-wrap:break-all;">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="nav-tabs-custom right" style="background-color: #000000">
                    <ul class="nav nav-tabs">
                        <li class="active" id="stgpara"><a href="#fa-stgpara" onclick="tabs(1)"
                                                           data-toggle="tab">策略参数</a></li>
                        <li id="stgindic"><a href="#fa-stgindic" onclick="tabs(2)" data-toggle="tab">策略指标</a></li>
                    </ul>
                    <div class="tab-content" style="background-color: #000000">
                        <!--策略参数-->
                        <div class="tab-pane mailbox-messages active" id="fa-stgpara">
                            <div class=" mailbox-messages ">
                                <div class="cancelheadiv" style="margin-left: 25px">
                                </div>
                                <table class="table table-bordered table-striped table-hover" id="StgparaTable"
                                       style="table-layout: fixed;word-break:break-all; word-wrap:break-all;">
                                </table>
                            </div>
                        </div>
                        <!--策略指标-->
                        <div class="tab-pane mailbox-messages" id="fa-stgindic">
                            <div class=" mailbox-messages">
                                <div class="cancelheadiv" style="margin-left: 25px">
                                </div>
                                <table class="table table-bordered table-striped table-hover" id="StgdicTable"
                                       style="table-layout: fixed;word-break:break-all; word-wrap:break-all;">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="nav-tabs-custom buttom" style="background-color: #000000">
                    <ul class="nav nav-tabs">
{#                        <li class="active"><a href="#fa-stgmm" onclick="btabs(1)" data-toggle="tab">做市类策略</a></li>#}
{#                        <li><a href="#fa-stgcta" onclick="btabs(2)" data-toggle="tab">CTA类策略</a></li>#}
                    </ul>
                    <div class="tab-content stginfo" style="background-color: #000000">
                        <!--做市类策略-->
                        <div class="tab-pane mailbox-messages active" id="fa-stgmm">
                            <div class=" mailbox-messages ">
                                <div class="cancelheadiv" style="margin-left: 25px">
                                </div>
                                <table class="table table-bordered table-striped table-hover" id="StgMMTable"
                                >
                                </table>
                            </div>
                        </div>
                        <!--CTA类策略-->
                        <div class="tab-pane mailbox-messages" id="fa-stgcta">
                            <div class=" mailbox-messages">
                                <div class="cancelheadiv" style="margin-left: 25px">
                                </div>
                                <table class="table table-bordered table-striped table-hover" id="StgCtaTable"
                                >
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


{% endblock %}

{% block scripts %}


    <script type="text/javascript">
        //风控信息
        //bstable渲染页面（固定写法）
        function InitBootstrapTable(my_url, my_table_id, my_columns, my_filename, stgid) {
            $('#' + my_table_id).bootstrapTable('destroy').bootstrapTable({
                url: my_url,
                method: 'get',
                columns: my_columns,
                {#height: 500,//固定高度，可以固定表头#}
                striped: true,
                cache: false,
                pagination: true,
                sortable: true,
                theadClasses: "thead-light",
                sortOrder: "asc",
                queryParams: function (pageRequest) {
                    pageRequest['ruleid'] = stgid;
                    return pageRequest;
                },
                sidePagination: "server",
                pageNumber: 1,
                pageSize: 20,
                pageList: [10, 25, 50, 100],
                minimumCountColumns: 2,
                clickToSelect: true,
                cardView: false,
                detailView: false,
                buttonsAlign: "right",
            })
        }

        // 风控信息
        my_columns = [
            {
                field: 'risktype',
                title: '风控类型'
            }, {
                field: 'riskindicator',
                title: '禁止指标',
                width: 200
            }, {
                field: 'risksource',
                title: '指标来源',
            }, {
                field: 'bondid',
                title: '代码',
            }, {
                field: 'direction',
                title: '方向',
            }, {
                field: 'settletype',
                title: '清算速度'
            }, {
                field: 'price',
                title: '报价(%)'
            }, {
                field: 'volume',
                title: '报量（万元）'
            }, {
                field: 'orderinserttime',
                title: '报单时间'
            }
        ];

        //风控信息
        function _stcriskinfoTable(id) {
            InitBootstrapTable("/trade/stcLriskinfo/", "stcriskinfoTable", my_columns, '0', id);
            //移除table-border和tbale-hover
            $("#stcriskinfoTable").removeClass("table-bordered");
            $("#stcriskinfoTable").removeClass("table-hover");
            $("#stcriskinfoTable").addClass("table-hov");
            $(".bootstrap-table").children().removeClass("fixed-table-toolbar");
            $('#stcriskinfo_id').modal("show");
        }

        var timer, clickFlag, stgtype, stgrefresh, stgStatus1, stgStatus2 = false;//外部变量,这三个变量是定时器是否存在的标志
        var stg_display = []
        //初始化策略列表
        $("#RuleTable").bootstrapTable({
            uniqueId: "RuleID",
            height: 400,//固定高度，可以固定表头
            theadClasses: "thead-table",
            unique: "RuleID",
            sortable: true,
            // 策略列表table
            columns: [{
                field: "RuleType",
                title: "策略类型",
                width: 30,
                visible: false
            }, {
                field: 'RuleID',
                title: '策略ID',
                width: 50,
                order: 'desc'
            }, {
                field: 'RuleName',
                title: '策略名称',
                width: 100
            }, {
                field: 'RuleRunStatus',
                title: '运行状态',
                width: 50,
                formatter: function (value, row, index) {
                    if (value === "1") {
                        return "停止"
                    } else if (value === "0") {
                        return "启动"
                    } else if (value === "01") {
                        return "启动中"
                    } else if (value === "11") {
                        return "停止中"
                    }
                }
            }, {
                field: 'LOption',
                title: '操作',
                width: 100,
                formatter: function (value, row, index) {
                    //var manualinput = "&nbsp<span onclick=\"input_('" + row.RuleID + "','" + row.RuleName + "')\" type='button' class='btn btn-primary btn-xs btn-flat btn_operation'> <i class='fa'></i>人工录入</span>";
                    if (row.RuleRunStatus === "0") {
                        var start = "<span style='width: 50px' class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal' disabled> <i class='fa'></i>启动</span> ";
                        var end = "<span style='width: 50px' onclick=\"endstg('" + row.RuleID + "','" + row.RuleName + "')\" type='button' class='btn btn-danger btn-xs btn-flat btn_operation'> <i class='fa'></i>停止</span>";
                    } else if (row.RuleRunStatus === "1") {
                        var start = "<span style='width: 50px' onclick=\"startstg('" + row.RuleID + "','" + row.RuleName + "')\" class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal' > <i class='fa'></i>启动</span> ";
                        var end = "<span style='width: 50px' type='button' class='btn btn-danger btn-xs btn-flat btn_operation' disabled> <i class='fa'></i>停止</span>";
                    } else {
                        var start = "<span style='width: 50px' class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal' disabled> <i class='fa'></i>启动</span> ";
                        var end = "<span style='width: 50px' type='button' class='btn btn-danger btn-xs btn-flat btn_operation' disabled> <i class='fa'></i>停止</span>";
                    }
                    if (row.RuleType === "3") {
                        return start + end;
                    } else {
                        return start + end;
                    }
                }
            },
                {
                    field: 'LRisk',
                    title: '风控',
                    width: 50,
                    visible:false,
                    formatter: function (value, row, index) {
                        var stcriskinfo = "<span onclick=\"_stcriskinfoTable('" + row.RuleID + "')\" class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal'> <i class='fa'></i>风控信息</span> ";
                        return stcriskinfo
                    }
                }],
            onClickRow: function (row, $element, field) {
                //当前行的父元素tbody下的所有tr移除样式类
                $element.parent().children().removeClass("onclickrow")
                $element.addClass("onclickrow")
                var ruleid = row.RuleID
                var rule_status = row.RuleRunStatus
                //点击一行数据，初始化策略参数和策略指标
                RulePropIndic(ruleid, rule_status)
                //刚开始需要把上次的定时器取消掉,然后再进行定时任务。
                if (clickFlag) {
                    clearInterval(timer)
                }
                clickFlag = true;
                timer = setInterval(function () {
                    //记录刷新前的滚动条位置
                    var scrollPositionpara = $("#StgparaTable").bootstrapTable("getScrollPosition");
                    var scrollPositionind = $("#StgdicTable").bootstrapTable("getScrollPosition");
                    //先移除所有的数据，然后再append
                    $('#StgparaTable').bootstrapTable('removeAll');
                    $('#StgdicTable').bootstrapTable('removeAll');
                    for (let key in ruleProps) {
                        //策略参数
                        if (key.startsWith(ruleid + "prop")) {
                            $('#StgparaTable').bootstrapTable('append', ruleProps[key]);
                        }
                        //策略指标
                        else if (key.startsWith(ruleid + "indic")) {
                            $('#StgdicTable').bootstrapTable('append', ruleProps[key]);
                        }
                    }
                    var clickFlag = false
                    //数据刷新之后，自动跳转到滚动条的位置。
                    setTimeout(function () {
                        $("#StgparaTable").bootstrapTable('scrollTo', scrollPositionpara)
                    }, 1)
                    setTimeout(function () {
                        $("#StgdicTable").bootstrapTable('scrollTo', scrollPositionind)
                    }, 1)
                }, 5000)
            }
        })


        //策略参数columns
        var columnparas = [
            {
                field: 'RuleID',
                title: '策略ID',
                visible: false
            }, {
                field: 'PropKey',
                title: '参数名'
            }, {
                field: 'PropValue',
                title: '参数值'
            }, {
                field: 'Description',
                title: '描述',
            }, {
                field: 'PropValueItems',
                title: '策略属性值选项',
                visible: false
            }, {
                field: 'PropType',
                title: '策略属性值类型',
                visible: false,
                formatter: function (value, row, index) {
                    var val = unescape(value.replace(/\\u/g, "%u"));
                    return val
                }
            }, {
                field: 'POption',
                title: '操作',
                formatter: function (value, row, index) {
                    return "<span onclick=\"modify('" + row.RuleID + "'" + "," + "'" + row.PropKey + "'" +
                        "," + "'" + row.PropValue + "'" + "," + "'" + row.Description + "'" + "," + "'" + row.PropValueItems
                        + "')\" class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal' data-target='#startstg'> <i class='fa'></i>编辑</span> "
                }
            }
        ]
        //初始化策略参数
        $("#StgparaTable").bootstrapTable('destroy').bootstrapTable({
            // 策略列表table
            height: 400,//固定高度，可以固定表头
            theadClasses: "thead-table",
            columns: columnparas,
            uniqueId: "RuleID"
        })

        //初始化策略指标
        $("#StgdicTable").bootstrapTable('destroy').bootstrapTable({
            uniqueId: "RuleID",
            height: 400,//固定高度，可以固定表头
            theadClasses: "thead-table",
            // 策略列表table
            columns: [{
                field: 'RuleID',
                title: '策略ID',
                visible: false
            }, {
                field: 'IndicatorKey',
                title: '指标名'
            }, {
                field: 'IndicatorValue',
                title: '指标值'
            }, {
                field: 'Description',
                title: '指标描述',
            }]
        })

        //初始化做市策略
        $("#StgMMTable").bootstrapTable('destroy').bootstrapTable({
            uniqueId: "RuleID",
            // 做市策略table
            height: 500,//固定高度，可以固定表头
            theadClasses: "thead-table",
            columns: [
                //第一行表头
                [{
                    field: 'RuleID',
                    title: '',
                    {#visible: false#}
                }, {
                    field: 'mm',
                    title: '做市券盘口',
                    colspan: 2
                }, {
                    field: 'hedge',
                    title: '对冲券盘口',
                    colspan: 2
                }, {
                    field: '',
                    title: '',
                    colspan: 2
                }, {
                    field: "my",
                    title: "我方报价",
                    colspan: 2
                }, {
                    field: '',
                    title: '',
                    colspan: 2
                }],
                //第二行表头
                [{
                    field: "RuleName",
                    title: "策略名称"
                }, {
                    field: "bid_mm",
                    title: "Bid"
                }, {
                    field: "ofr_mm",
                    title: "Ofr"
                }, {
                    field: "bid_hedge",
                    title: "Bid"
                }, {
                    field: "ofr_hedge",
                    title: "Ofr"
                }, {
                    field: "spread",
                    title: "合理利差"
                }, {
                    field: "offset",
                    title: "偏移"
                }, {
                    field: "bid_my",
                    title: "Bid"
                }, {
                    field: "ofr_my",
                    title: "Ofr"
                }, {
                    field: "position",
                    title: "持仓"
                }, {
                    field: "is_broken",
                    title: "断腿警告"
                }]
            ],
        })

        //初始化cta策略
        $("#StgCtaTable").bootstrapTable('destroy').bootstrapTable({
            uniqueId: "RuleID",
            height: 500,//固定高度，可以固定表头
            theadClasses: "thead-table",
            // CTA策略table
            columns: [
                {
                    field: "RuleName",
                    title: "策略名称"
                }, {
                    field: "indicator1",
                    title: "指标1"
                }, {
                    field: "indicator2",
                    title: "指标2"
                }, {
                    field: "trade_time",
                    title: "最新成交时间"
                }, {
                    field: "yield",
                    title: "收益率"
                }, {
                    field: "high",
                    title: "高"
                }, {
                    field: "low",
                    title: "低"
                }, {
                    field: "close",
                    title: "收",
                }, {
                    field: "decision",
                    title: "决策点"
                }, {
                    field: "trigger",
                    title: "触发点"
                },
                {
                    field: "direction",
                    title: "方向"
                },
                {
                    field: "position",
                    title: "持仓"
                },
                {
                    field: "volume_left",
                    title: "待执行量"
                },
                {
                    field: "ytm_signal",
                    title: "信号价格"
                },
                {
                    field: "ytm_limit",
                    title: "限价"
                }
            ],
        })

        //rules用于存储 策略列表和不同类型的策略, ruleprops用于存储策略参数和策略指标
        var rules = {}, ruleProps = {}, CtaMktStg = {};
        var idsarry = [];
        var ws = reconnect();

        /*服务断开之后，界面的数据全部清空*/
        function format_rule() {
            $('#RuleTable').bootstrapTable('removeAll');
            $('#StgparaTable').bootstrapTable('removeAll');
            $('#StgdicTable').bootstrapTable('removeAll');
            $('#StgMMTable').bootstrapTable('removeAll');
            $('#StgCtaTable').bootstrapTable('removeAll');
            rules = {}
            ruleProps = {}
        }

        function reconnect() {
            var wsobj = $.trade("ws://" + LiveIP + ":" + LivePORT + "/", {//
                OnFrontConnected: function () {
                    console.log("连接成功")
                    $("#link").removeAttr("class")
                    $("#link").addClass("link-success")
                    $("#link").text("连接成功")
                    loadon()
                    // 如果不给缓冲时间，ws.send会报错
                    // DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.
                    setTimeout(function () {
                        sendMsg_login()
                        $("#link").text("")
                    }, 1000)

                },
                OnFrontDisconnected: function () {
                    {#alert("当前服务已终止，请稍后再试！");#}
                    console.log("与服务断开连接");
                    $("#link").removeAttr("class")
                    $("#link").addClass("link-fail")
                    $("#link").text("与服务断开连接")
                    format_rule()

                    setTimeout(function () {
                        console.log("尝试重连....")
                        $("#link").removeAttr("class")
                        $("#link").addClass("link-reconnect")
                        $("#link").text("尝试重连....")
                        //重连后将返回值赋值给全局变量ws,在进行启停等操作时就是新的ws对象，原ws已经断开
                        ws = reconnect()
                    }, 5000)

                },
                OnRtnApiDisconnected: function (r) {
                    console.log("远程服务已断开")
                    $("#link-online").removeAttr("class")
                    $("#link-online").addClass("link-tkd")
                    $("#link-online").text("远程服务已断开")
                    format_rule()
                },
                OnRtnApiConnected: function (r) {
                    console.log("远程服务连接成功")
                    $("#link-online").removeAttr("class")
                    $("#link-online").addClass("link-tkc")
                    $("#link-online").text("远程服务连接成功")
                    setTimeout(function () {
                        $("#link-online").text("")
                    }, 1000)
                },
                OnRspUserLogin: function (r) {
                    //{TID: data：{}，RspInfoField:{ErrorID：“”，ErrorMsg：“”}
                    if (r.RspInfoField.ErrorID == 0) {
                        console.log(r.data.CustomerID + " 交易登录成功");
                        user.CustomerID = r.data.CustomerID;
                    } else
                        console.log("交易登录失败：" + r.RspInfoField.ErrorMsg);
                },
                OnRtnRule: function (r) {
                    if (r.hasOwnProperty("increment") && r.increment === 0) {
                        stg_display.find(function (value) {
                            if (value === r.data.RuleID) {
                                if (rules[r.data.RuleID] == undefined) {
                                    if (r.data.RuleRunStatus == undefined) {
                                        r.data.RuleRunStatus = 0;
                                    }
                                    $('#RuleTable').bootstrapTable('insertRow', {
                                        index: 0,
                                        row: r.data
                                    });
                                } else {
                                    $('#RuleTable').bootstrapTable('updateByUniqueId', {
                                        id: r.data.RuleID,
                                        row: r.data
                                    });
                                }
                                rules[r.data.RuleID] = r.data;
                                rules[r.data.RuleID].RuleRunStatus = 0;
                            }
                        })
                    } else {
                        if (rules[r.data.RuleID] == undefined) {
                            if (r.data.RuleRunStatus == undefined) {
                                r.data.RuleRunStatus = 0;
                            }
                            $('#RuleTable').bootstrapTable('insertRow', {
                                index: 0,
                                row: r.data
                            });
                        } else {
                            $('#RuleTable').bootstrapTable('updateByUniqueId', {
                                id: r.data.RuleID,
                                row: r.data
                            });
                        }
                        rules[r.data.RuleID] = r.data;
                        rules[r.data.RuleID].RuleRunStatus = 0;
                    }
                    if (r.hasOwnProperty("islast") && r.islast) {
                        loadoff()
                    }
                },
                OnRtnRuleStatus: function (r) {
                    if (r.hasOwnProperty("increment") && r.increment === 0) {
                        stg_display.find(function (value) {
                            if (value === r.data.RuleID) {
                                rules[r.data.RuleID].RuleRunStatus = r.data.RuleRunStatus;
                                if (rules[r.data.RuleID].RuleRunStatus === undefined) {
                                    $('#RuleTable').bootstrapTable('append', r.data);
                                } else {
                                    $('#RuleTable').bootstrapTable('updateByUniqueId', {
                                        id: r.data.RuleID,
                                        row: r.data
                                    });
                                }
                            }
                        })
                    } else {
                        rules[r.data.RuleID].RuleRunStatus = r.data.RuleRunStatus;
                        if (rules[r.data.RuleID].RuleRunStatus === undefined) {
                            $('#RuleTable').bootstrapTable('append', r.data);
                        } else {
                            $('#RuleTable').bootstrapTable('updateByUniqueId', {
                                id: r.data.RuleID,
                                row: r.data
                            });
                        }
                    }
                    if (r.hasOwnProperty("islast") && r.islast) {
                        loadoff()
                    }
                    //$("#console").append("<br/>策略状态 " + r.data.RuleID + ":" + r.data.RuleRunStatus);
                },
                OnRtnRuleProp: function (r) {
                    if (rules[r.data.RuleID] !== undefined) {
                        rules[r.data.RuleID][r.data.PropKey] = r.data.PropValue
                    }
                    if (r.hasOwnProperty("islast") && r.islast) {
                        loadoff()
                    }
                    ruleProps[r.data.RuleID + "prop" + "_" + r.data.PropKey] = r.data
                },
                OnRtnCtaMktRule: function (r) {
                    if (r.hasOwnProperty("islast") && r.islast) {
                        loadoff()
                    }

                    /**
                     * 如果推过来的是全量数据，则是第一次加载，
                     * 需要进行比对之后在渲染数据
                     *
                     * 如果推过来的是增量数据，则不需要进行过滤，筛选
                     * 直接add或者update
                     * **/

                    if (r.hasOwnProperty("increment") && r.increment === 0) {
                        stg_display.find(function (value) {
                            if (value === r.data.RuleID) {
                                if (CtaMktStg[r.data.RuleID] === undefined) {
                                    if (r.data.RuleType === "1") {
                                        $('#StgMMTable').bootstrapTable('append', r.data);
                                    } else if (r.data.RuleType === "2") {
                                        $("#StgCtaTable").bootstrapTable('append', r.data)
                                    }
                                } else {
                                    if (r.data.RuleType === "1") {
                                        $('#StgMMTable').bootstrapTable('updateByUniqueId', {
                                            id: r.data.RuleID,
                                            row: r.data
                                        });
                                    } else if (r.data.RuleType === "2") {
                                        $('#StgCtaTable').bootstrapTable('updateByUniqueId', {
                                            id: r.data.RuleID,
                                            row: r.data
                                        });
                                    }
                                }
                            }
                        })
                    } else {
                            if (r.data.RuleType === "1") {
                                $('#StgMMTable').bootstrapTable('updateByUniqueId', {
                                    id: r.data.RuleID,
                                    row: r.data
                                });
                            } else if (r.data.RuleType === "2") {
                                $('#StgCtaTable').bootstrapTable('updateByUniqueId', {
                                    id: r.data.RuleID,
                                    row: r.data
                                });
                            }
                    }
                },
                OnRtnRuleIndicator: function (r) {
                    if (rules[r.data.RuleID] !== undefined) {
                        rules[r.data.RuleID][r.data.IndicatorKey] = r.data.IndicatorValue
                    }
                    if (r.hasOwnProperty("islast") && r.islast) {
                        loadoff()
                    }
                    ruleProps[r.data.RuleID + "indic" + "_" + r.data.IndicatorKey] = r.data;
                },
                events: {
                    say: function (e) {
                        alert(e.data.name); // 'foo'
                        alert(e.data.text); // 'baa'
                    }
                }
            })
            return wsobj
        }

        function sendMsg_login() {
            $.get("/trade/LiveStg/", function (data) {
                stg_display = data
                ws.ReqUserLogin("1001", "123456");
            });
        }


        function tabs(n) {
            if (n == 1) {
                $('#fa-stgpara').addClass('active');
                $('#fa-stgindic').removeClass('active');
            } else {
                $('#fa-stgpara').removeClass('active');
                $('#fa-stgindic').addClass('active');
            }
        }


        //点击做事类策略或者CTA类策略
        function btabs(n) {
            //将wrapper的style属性移除，因为该类有一个样式 height:auto，会形成两个滚动条。
            $(".wrapper").css("height", "1200px")
            {#initypestg()#}
            if (n == 1) {
                $('#fa-stgmm').addClass('active');
                $('#fa-stgcta').removeClass('active');

                /**
                 {#clearInterval(stgtype)#}
                 stgtype = setInterval(function () {
                    //记录刷新前的滚动条位置
                    var scrollPositionMM = $("#StgMMTable").bootstrapTable("getScrollPosition");
                    var scrollPositionCta = $("#StgCtaTable").bootstrapTable("getScrollPosition");
                    //先移除所有的数据，然后再append
                    $('#StgMMTable').bootstrapTable('removeAll');
                    $('#StgCtaTable').bootstrapTable('removeAll');
                    //bootstraptable渲染不同类型的策略
                    for (let key in rules) {
                        sleep(200)
                        if (rules[key]["RuleType"] === "1") {
                            $('#StgMMTable').bootstrapTable('append', rules[key]);
                        } else if (rules[key]["RuleType"] === "2") {
                            $('#StgCtaTable').bootstrapTable('append', rules[key]);
                        }
                    }
                    {#//数据刷新之后，自动跳转到滚动条的位置。#}
                    {#setTimeout(function () {#}
                    {#    $("#StgMMTable").bootstrapTable('scrollTo', scrollPositionMM)#}
                    {# }, 1)#}
                    {#setTimeout(function () {#}
                    {#    $("#StgCtaTable").bootstrapTable('scrollTo', scrollPositionCta)#}
                    {# }, 1)#}
                }, 10000)


                 } else {
                $('#fa-stgmm').removeClass('active');
                $('#fa-stgcta').addClass('active');
                clearInterval(stgtype)
                stgtype = setInterval(function () {
                    //先移除所有的数据，然后再append
                    $('#StgMMTable').bootstrapTable('removeAll');
                    $('#StgCtaTable').bootstrapTable('removeAll');
                    //bootstraptable渲染不同类型的策略
                    for (let key in rules) {
                        sleep(200)
                        if (rules[key]["RuleType"] === "1") {
                            $('#StgMMTable').bootstrapTable('append', rules[key]);
                        } else if (rules[key]["RuleType"] === "2") {
                            $('#StgCtaTable').bootstrapTable('append', rules[key]);
                        }
                    }
                    //数据刷新之后，自动跳转到滚动条的位置。
                    {#setTimeout(function () {#}
                    {#    $("#StgMMTable").bootstrapTable('scrollTo', scrollPositionMM)#}
                    {# }, 1)#}
                    {#setTimeout(function () {#}
                    {#    $("#StgCtaTable").bootstrapTable('scrollTo', scrollPositionCta)#}
                    {# }, 1)#}
                }, 10000)**/
            }


        }

        //策略参数和策略指标的初始化（点击某一行策略时触发）
        function RulePropIndic(ruleid, rulestatus) {
            //先移除所有的数据，然后再append
            $('#StgparaTable').bootstrapTable('removeAll');
            $('#StgdicTable').bootstrapTable('removeAll');
            for (let key in ruleProps) {
                //策略参数
                if (key.startsWith(ruleid + "prop")) {
                    $('#StgparaTable').bootstrapTable('append', ruleProps[key]);
                }
                //策略指标
                else if (key.startsWith(ruleid + "indic")) {
                    $('#StgdicTable').bootstrapTable('append', ruleProps[key]);
                }
            }

        }

        function new_col(idn) {
            var h = "<tr class='activetable'>" + '<td>' +
                '                                        <span style="padding:3px; cursor: pointer" class="btn-danger small"\n' +
                '                                              onclick="$(this).parent().parent().remove()">删除行' +
                '                                        </span>' +
                '                                    </td>' +
                "<td><input class='activetable' name='stg_val'></td>" +
                "</td>" +
                "<td><input class='activetable' name='stg_choices'></td>" +
                "<td><input class='activetable' name='stg_desc'></td>" +
                "</tr>";
            $('#' + idn).append($(h));
        };

        //一键撤单模态框展示
        function stopall() {
            $("#upmodal").modal("show")
        }

        //一键撤单模态框取消
        function quit_stop() {
            $("#upmodal").modal("hide")
        }

        var start_setTime1, start_setTime2 = null

        //启动策略
        function startstg(id, rulename) {
            var customerid = $("#content").attr("name")
            $("#RuleTable").bootstrapTable('updateByUniqueId', {
                id: id,
                row: {
                    RuleRunStatus: "01"
                }
            })
            ws.ReqOptionStg("start", id, customerid, "1", rulename, "live");//flag为1时表示启动或者停止策略
            //启动后清空策略参数展示
            $('#StgparaTable').bootstrapTable('removeAll');
            $('#StgdicTable').bootstrapTable('removeAll');
            //清除已经存在的SetTimeout对象
            if (start_setTime1) {
                clearTimeout(start_setTime1)
                start_setTime1 = null
            } else if (start_setTime2) {
                clearTimeout(start_setTime2)
                start_setTime2 = null
            }
            //2s后轮询，判断状态是否异常
            start_setTime1 = setTimeout(function () {
                var stgobj = $('#RuleTable').bootstrapTable('getRowByUniqueId', id)
                if (stgobj.RuleRunStatus === "01") {
                    stgStatus1 = setInterval(function () {
                        console.log("轮询")
                        for (let key in rules) {
                            if (key === id && rules[key]["RuleRunStatus"] === "0") {
                                $('#RuleTable').bootstrapTable('updateByUniqueId', {
                                    id: r.data.RuleID,
                                    row: r.data
                                });
                            }
                        }
                    }, 2000)
                } else {
                    clearInterval(stgStatus1)
                }
            }, 2000)

            //20s后清除轮询
            start_setTime2 = setTimeout(function () {
                var stgobj = $('#RuleTable').bootstrapTable('getRowByUniqueId', id)
                if (stgobj.RuleRunStatus === "01") {
                    clearInterval(stgStatus1)
                    $("#title_success").text("启动")
                    $("#msg_success").text(rulename + "启动失败，请检查策略！")
                    $("#oper_success").modal("show");
                    setTimeout(function () {
                        $("#oper_success").modal("hide");
                        window.location.reload()
                    }, 2000)
                } else {
                    clearInterval(stgStatus1)
                }
            }, 20000)
        }


        var end_setTime1, end_setTime2 = null;

        //停止策略
        function endstg(id, rulename) {
            var customerid = $("#content").attr("name")
            $("#RuleTable").bootstrapTable('updateByUniqueId', {
                id: id,
                row: {
                    RuleRunStatus: "11"
                }
            })
            ws.ReqOptionStg("end", id, customerid, "1", rulename, "live");
            //停止后清空策略参数展示
            $('#StgparaTable').bootstrapTable('removeAll');
            $('#StgdicTable').bootstrapTable('removeAll');
            //清除已经存在的SetTimeout对象
            if (end_setTime1) {
                clearTimeout(end_setTime1)
                end_setTime1 = null
            } else if (end_setTime2) {
                clearTimeout(end_setTime2)
                end_setTime2 = null
            }
            //2s后轮询，判断状态是否异常
            end_setTime1 = setTimeout(function () {
                var stgobj = $('#RuleTable').bootstrapTable('getRowByUniqueId', id)
                stgStatus2 = setInterval(function () {
                    if (stgobj.RuleRunStatus === "11") {
                        for (let key in rules) {
                            if (key === id && rules[key]["RuleRunStatus"] === "1") {
                                $('#RuleTable').bootstrapTable('updateByUniqueId', {
                                    id: r.data.RuleID,
                                    row: r.data
                                });
                            }
                        }
                    } else {
                        clearInterval(stgStatus2)
                    }
                }, 2000)
            }, 2000)

            //20s后清除轮询
            end_setTime2 = setTimeout(function () {
                var stgobj = $('#RuleTable').bootstrapTable('getRowByUniqueId', id)
                if (stgobj.RuleRunStatus === "11") {
                    clearInterval(stgStatus2)
                    $("#title_success").text("停止")
                    $("#msg_success").text(rulename + "停止失败，请检查策略！")
                    $("#oper_success").modal("show");
                    setTimeout(function () {
                        $("#oper_success").modal("hide");
                        window.location.reload()
                    }, 2000)
                } else {
                    clearInterval(stgStatus2)
                }
            }, 20000)
        }

        //编辑策略参数
        function modify(id, key, value, desc, valueitems) {
            $("#para_spaninfo").text("")
            $("#paraid").val(id)
            $("#paraname").val(key)
            $("#paravalue").val(value)
            $("#paradesc").val(desc)
            $("#paravalue").attr("name", valueitems); //为参数值设置name属性，值为valueitems，用于传到websockets传给userapi
            $("#editstg").modal("show")
        }

        //隐藏编辑策略模态框
        function quit__() {
            $("#editstg").modal("hide");
            $("#input_").modal('hide')
        }

        //隐藏确认框
        function quit__inp() {
            $("#input_confirm").modal("hide")
            $("#input_confirm").html("")
        }

        //一键撤单提交操作
        function sub1() {
            var customerid = $("#content").attr("name");
            for (let ruleid in rules) {
                ws.ReqOptionStg("end", ruleid, customerid, "3", "", ""); //flag 为3时表示对所有策略循环停止，不写日志
            }
            ws.ReqOptionStg("end", "", customerid, "2", "", ""); //flag 为2时表示所有需要撤单的策略全部停止完毕，只需要写日志就好了
            $("#upmodal").modal("hide")
        }

        //延时函数
        var sleep = function (time) {
            var startTime = new Date().getTime() + parseInt(time, 10);
            while (new Date().getTime() < startTime) {
            }
        }

        //提交修改后的数据(策略参数)
        function sub() {
            var customerid = $("#content").attr("name")
            var paraid = $("#paraid").val();
            var paraname = $("#paraname").val();
            var paravalue = $("#paravalue").val();
            var paradesc = $("#paradesc").val();
            if (paravalue === "") {
                $("#para_spaninfo").text("策略参数不能为空！")
                return;
            }
            ws.ReqStgPara(customerid, paraid, paraname, paravalue, paradesc, "0",)
            quit__()
            loadon()
            $.ajax({
                type: "post",
                url: "/trade/live_alterpara/",
                data:
                    {
                        "ruleid": paraid,
                        "paraname": paraname,
                        "paravalue": paravalue,
                        "paradesc": paradesc,
                    },
                success: function (data) {
                    loadoff();
                    if (data === "y") {
                        $("#oper_success").modal("show");
                        setTimeout(function () {
                            $("#oper_success").modal("hide");
                        }, 2000)
                    } else {
                        $("#msg_success").text(data)
                        $("#oper_success").modal("show");
                        setTimeout(function () {
                            $("#oper_success").modal("hide");
                        }, 2000)
                    }
                }
            })
        }

        //人工录入的模态框
        function input_(ruleid, rulename) {
            $("input").val("");
            $("select").val("");
            $("#speedliqui").val("2");
            $("#vol_spaninfo").text("")
            $("#netprice_spaninfo").text("")
            $("#tranc_spaninfo").text("")
            $("#speedliqui_spaninfo").text("")
            $("#direction_spaninfo").text("")
            $("#bodecode_spaninfo").text("")
            //债券代码和方向的初始值
            for (let key in ruleProps) {
                if (key === ruleid + "indic_symbol") {
                    $("#bondcode").val(ruleProps[key]["IndicatorValue"])
                } else if (key === ruleid + "indic_direction") {
                    if (ruleProps[key]["IndicatorValue"] === "1") {
                        $("#direction").val("0")
                    } else if (ruleProps[key]["IndicatorValue"] === "0") {
                        $("#direction").val("1")
                    }
                }
            }
            $("#manual-ruleid").val(ruleid)
            {#$("#manual-rulename").val(encodeURI(rulename))#}
            $("#manual-rulename").val(rulename)
            $("#input_").modal("show")
        }

        //4位小数校验，不足补0
        function checkfour(inp, typ) {
            var inp_split = inp.split(".");
            if (inp_split.length > 2) {
                if (typ === "tranc") {
                    $("#tranc_spaninfo").text("成交价输入格式有误！")
                } else if (typ === "netprice") {
                    $("#netprice_spaninfo").text("净价输入格式有误！")
                }
                return "n"
            } else if (inp_split.length === 1) {
                if (inp_split[0] === "") {
                    return ""
                }
                return inp + ".0000"
            } else if (inp_split[1].length > 4) {
                $("#" + typ + "_spaninfo").text("最多保留4位小数！")
                return "n"
            } else {
                var l = inp_split[1].length
                var a = 4 - l;
                if (a > 0 && a !== 0) {
                    for (let i = 0; i < a; i++) {
                        inp += "0"
                    }
                }
                return inp
            }

        }


        //人工录入模态框的提交
        function input_sub() {
            $("#input_confirm").html("")
            //所有的提示信息都清空
            $("#vol_spaninfo").text("")
            $("#netprice_spaninfo").text("")
            $("#tranc_spaninfo").text("")
            $("#speedliqui_spaninfo").text("")
            $("#direction_spaninfo").text("")
            $("#bodecode_spaninfo").text("")

            const bondcode = $("#bondcode").val();
            const direction = $("#direction").val();
            const speedliqui = $("#speedliqui").val();
            var tranc = $("#tranc").val();
            var netprice = $("#netprice").val();
            const vol = $("#vol").val()
            //点击提交首先检验
            if (bondcode === "") {
                $("#bodecode_spaninfo").text("债券代码不能为空！")
                return;
            } else if (direction === "") {
                $("#direction_spaninfo").text("方向不能为空！")
                return;
            } else if (speedliqui === "") {
                $("#speedliqui_spaninfo").text("清算速度不能为空！")
                return;
            } else if (tranc === "") {
                $("#tranc_spaninfo").text("成交价不能为空！")
                return;
            } else if (vol === "") {
                $("#vol_spaninfo").text("成交量不能为空！")
                return;
            } else if (parseFloat(tranc).toString() === "NaN") {
                $("#tranc_spaninfo").text("成交价必须为数字！")
                return;
            } else if (netprice && parseFloat(netprice).toString() === "NaN") {
                $("#netprice_spaninfo").text("净价必须为数字！")
                return;
            } else if (/^\d+$/.test(vol) === false || parseInt(vol) > 100000 || parseInt(vol) < 1) {
                $("#vol_spaninfo").text("成交量必须为1-100000的整数！")
                return;
            }
            //id，name传给后台
            var ruleid = $("#manual-ruleid").val()
            var rulename = $("#manual-rulename").val()
            var flag1 = checkfour(tranc, "tranc")
            var flag2 = checkfour(netprice, "netprice")
            if (flag1 === "n" || flag2 === "n") {
                return;
            } else {
                tranc = flag1;
                netprice = flag2;
            }

            const direction_val = $("#direction").find("option[value=" + direction + "]").text().replace(/\s+/g, "");
            const speedliqui_val = $("#speedliqui").find("option[value=" + speedliqui + "]").text().replace(/\s+/g, "");
            var input_confirm = '<div class="modal-dialog">\n' +
                '            <div class="modal-content">\n' +
                '                <div class="modal-header">\n' +
                '                    <h4 class="modal-title">人工录入确认</h4>\n' +
                '                </div>\n' +
                '                <div class="modal-body">\n' +
                '                    <form>\n' + '<div style="display: none">\n' +
                '                            <input id="cmanual-ruleid" value="' + ruleid + '">\n' +
                '                            <input id="cmanual-rulename" value="' + rulename + '">\n' +
                '                        </div>' +
                '                        <div style="margin-top:3%; display: block">\n' +
                '                            <label>债券代码*</label>\n' +
                '                            <input class="opts conf" id="cbondcode" name="bondcode" type="text"\n' +
                '                                   value="' + bondcode + '">\n' +
                '                        </div>\n' +
                '                        <div style="margin-top:3%">\n' +
                '                            <label>方向*</label>\n' +
                '                            <input class="opts conf" id="cdirection" name="' + direction + '" type="text"\n' +
                '                                   value="' + direction_val + '">\n' +
                '                        </div>\n' +
                '                        <div style="margin-top:3%">\n' +
                '                            <label>清算速度*</label>\n' +
                '                            <input class="opts conf" id="cspeedliqui" name="' + speedliqui + '" type="text" value="' + speedliqui_val + '">\n' +
                '                        </div>\n' +
                '                        <div style="margin-top:3%; display: block">\n' +
                '                            <label>成交价(%)*</label>\n' +
                '                            <input class="opts conf" id="ctranc" name="tranc" type="text"\n' +
                '                                   value="' + tranc + '">\n' +
                '                        </div>\n' +
                '                        <div style="margin-top:3%; display: block">\n' +
                '                            <label>净价(元)</label>\n' +
                '                            <input class="opts conf" id="cnetprice" name="netprice" type="text"\n' +
                '                                   value="' + netprice + '">\n' +
                '                        </div>\n' +
                '                        <div style="margin-top:3%; display: block">\n' +
                '                            <label>成交量(万)*</label>\n' +
                '                            <input class="opts conf" id="cvol" name="vol" type="text"\n' +
                '                                   value="' + vol + '">\n' +
                '                        </div>\n' +
                '                        <hr>\n' +
                '                        <div style="height: 20px; display: block">\n' +
                '                            <div style="padding-left:120px; float: left;">\n' +
                '                            <span class="btn-cancel btn-stc"\n' +
                '                                  onclick="quit__inp()">取消</span>\n' +
                '                            </div>\n' +
                '                            <div style="padding-left:5px;float: left;">\n' +
                '                            <span class="btn-confirm btn-stc"\n' +
                '                                  onclick="hand_sub()">提交</span>\n' +
                '                            </div>\n' +
                '                        </div>\n' +
                '                    </form>\n' +
                '                </div>\n' +
                '            </div>\n' +
                '        </div>'

            $("#input_confirm").append(input_confirm)
            $("#input_confirm").modal("show")


        }


        //人工录入后台发送请求
        function hand_sub() {
            const bondcode = $("#cbondcode").val();
            const direction_val = $("#cdirection").attr('name');
            const speedliqui_val = $("#cspeedliqui").attr('name');
            var tranc = $("#ctranc").val();
            var netprice = $("#cnetprice").val();
            const vol = $("#cvol").val()
            var ruleid = $("#cmanual-ruleid").val()
            var rulename = $("#cmanual-rulename").val()
            var customerid = $("#content").attr("name")

            //提交前关闭人工录入及其确认模态框
            quit__()
            quit__inp()
            loadon()
            //向websocket发送数据
            ws.OnReqManualTradeInsert(bondcode, direction_val, speedliqui_val, tranc, netprice, vol, ruleid, customerid)
            $.ajax({
                type: "post",
                url: "/trade/live_hand_input/",
                data:
                    {
                        "bondcode": bondcode,
                        "direction_val": direction_val,
                        "speedliqui_val": speedliqui_val,
                        "tranc": tranc,
                        "netprice": netprice,
                        "vol": vol,
                        "ruleid": ruleid,
                        "rulename": rulename,
                        "customerid": customerid
                    },
                success: function (data) {
                    loadoff()
                    $("#title_success").text("人工录入")
                    if (data === "y") {
                        $("#msg_success").text("录入成功！")
                        $("#oper_success").modal("show");
                        setTimeout(function () {
                            $("#oper_success").modal("hide");
                        }, 2000)
                    } else {
                        $("#msg_success").text(data)
                        $("#oper_success").modal("show");
                        setTimeout(function () {
                            $("#oper_success").modal("hide");
                        }, 2000)
                    }
                }
            })

        }


        $(function () {
            //{#initypestg()#}
            $('#fa-stgmm').addClass('active');
            $('#fa-stgcta').removeClass('active');
            $("#StgMMTable").parent().parent().removeClass("fixed-height")
            $("#StgCtaTable").parent().parent().removeClass("fixed-height")

            /**
             clearInterval(stgtype);
             stgtype = setInterval(function () {
                //记录刷新前的滚动条位置
                var scrollPositionMM = $("#StgMMTable").bootstrapTable("getScrollPosition");
                var scrollPositionCta = $("#StgCtaTable").bootstrapTable("getScrollPosition");
                //先移除所有的数据，然后再append
                $('#StgMMTable').bootstrapTable('removeAll');
                $('#StgCtaTable').bootstrapTable('removeAll');
                //bootstraptable渲染不同类型的策略
                for (let key in rules) {
                    if (rules[key]["RuleType"] === "1") {
                        $('#StgMMTable').bootstrapTable('append', rules[key]);
                    } else if (rules[key]["RuleType"] === "2") {
                        $('#StgCtaTable').bootstrapTable('append', rules[key]);
                    }
                }
                //数据刷新之后，自动跳转到滚动条的位置。
                setTimeout(function () {
                    $("#StgMMTable").bootstrapTable('scrollTo', scrollPositionMM)
                }, 1)
                setTimeout(function () {
                    $("#StgCtaTable").bootstrapTable('scrollTo', scrollPositionCta)
                }, 1)
            }, 10000)
             **/
        })


    </script>
    <style>
        {#bootstraptable表格布局样式#}
        .bootstrap-table .fixed-table-container .table {
        {#width: 90%;#}{#margin-bottom: 0 !important;#}{#margin: 0 auto;#}{#border: solid #444 !important#}
        }

        {#bootstraptable上边框#}
        .table-bordered {
            border: 1px solid transparent !important;
        }

        {#bootstraptable左侧边框#}
        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
            border: 1px solid rgba(255, 255, 255, .15);
        }


        .tab-content {
            height: 380px;
        }

        .stginfo {
            height: 400px;
        }

        .onclickrow {
            background-color: #444444;
        }

        .opts {
            background-color: white;
            margin-left: 10px;
        }

        /*距离上部*/
        .fixed-height {
            margin-top: 48px;
        }

        /*去掉fixed-table-toolbar的高度，否则左右出现对不齐*/
        .fixed-table-toolbar {
            margin-top: 46px;
        }

        #fa-stgmm > div > div > div.fixed-table-toolbar {
            margin-top: 0;
        }

        #fa-stgcta > div > div > div.fixed-table-toolbar {
            margin-top: 0;
        }

        .table-hov > tbody > tr:hover {
            background-color: #eee;
            cursor: pointer;
        }

        .bootstrap-table .fixed-table-container .fixed-table-body {
            overflow-x: hidden;
            overflow-y: auto;
            height: 90%;
            /* margin-top: 43px; */
        }

        .buttom {
            display: none;
            width: 97%;
            height: 400px;
            float: left;
            margin-top: 40px;
        }

        #StgCtaTable + div.fixed-table-border {
            height: 0;
        }

        #StgMMTable + div.fixed-table-border {
            height: 0;
        }
    </style>


{% endblock %}